<template>
  <div>
    <headers></headers>
    <div class="swiper-container" id="swiperContainer">
        <div class="swiper-wrapper" style="min-height: 65vh;">
          <div v-for="(item,index) in bannerList" :key="index" style="min-height: 65vh;" class="swiper-slide" >
            <img class="swiper-slide-img" :src="item.file" alt="" />
          </div>

        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="module_box">
        <div class="module_box_item_list">
          <div class="module_box_item_list_title">
            <span class="">{{$t('public.Notice')}}</span>
            <span class="more" @click="navTo('/news?type=new')">{{$t('public.more')}}</span>
          </div>
          <!-- 公告 -->
          <div @click="navTo('/newInfo?id='+item.id+'&type=new')" v-for="(item,index) in NoticeList" :key="index" class="module_box_item_list_text">
            <div class="module_box_item_list_Tit uni-ellipsis">
              {{item.name}}
            </div>
            <div class="xian">
            </div>
            <div>
              {{item.add_time}}
            </div>
          </div>
        </div>
        <div class="module_box_item_list">
          <!-- 常见问题 -->
          <div class="module_box_item_list_title">
            <span class="">{{$t('public.frequently_asked_question')}}</span>
            <span class="more" @click="navTo('/news?type=question')">{{$t('public.more')}}</span>
          </div>
          <div v-for="(item,index) in questionList" :key="index" @click="navTo('/newInfo?id='+item.id+'&type=question')" class="module_box_item_list_text">
            <div class="module_box_item_list_Tit uni-ellipsis">
              {{item.name}}
            </div>
            <div class="xian">
            </div>
            <div>
              {{item.add_time}}
            </div>

          </div>
        </div>
        <div class="module_box_item_list">
          <div class="module_box_item_list_title">
            <span class="">{{$t('public.testimonials')}}</span>
            <span class="more"  @click="navTo('/news?type=ping')">{{$t('public.more')}}</span>
          </div>
          <div  v-for="(item,index) in pingList" :key="index" @click="navTo('/newInfo?id='+item.id+'&type=ping')" class="module_box_item_list_text">
            <div class="module_box_item_list_Tit uni-ellipsis">
              {{item.name}}
            </div>
            <div class="xian">
            </div>
            <div>
              {{item.add_time}}
            </div>

          </div>
        </div>

      </div>
      <!-- <footers></footers> -->
  </div>
</template>

<script>
 import Swiper from "swiper";
 import "swiper/css/swiper.min.css";
 import headers from "@/components/header"
 import footers from "@/components/footers"
 import {
   agreement,
   banner,
   comment_list
 } from '@/utils/wqzApi'
export default {
    components:{
      headers,
      footers
    },
    data () {
        return {
            swiperOption: {
                loop: true,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true
                },
            },
            NoticeList:[], // 公告
            questionList:[],//常见问题
            pingList:[],//评论列表
            bannerList:[],//首页轮播图
        }
    },
    mounted() {
          console.log(headers , '脑袋')
          this.comment_list()
          this.getList(2)
          this.getList(3)
          this.getBanner()

    },
    methods:{
      comment_list(){
        // 客户评论
        var data = {
          page:1,
          limt:5,
          name:''
        }
        comment_list(data).then(res=>{
          console.log(res ,'评论')
          this.pingList = res.data.list
        })
      },
      newswiper(){
        var Myswiper = new Swiper(".swiper-container", {
          loop: true, // 循环模式选项
             // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable: true
          },
        });
        /*鼠标移入停止轮播，鼠标离开 继续轮播*/
        var container = document.getElementById('swiperContainer');
        container.onmouseover = function () {
          Myswiper.autoplay.stop();
        };
        container.onmouseout = function () {
          Myswiper.autoplay.start();
        }
      },
      getBanner(){
        // 首页轮播图
        var data = {}
        banner(data).then(res=>{
          res.data.forEach((item , index)=>{
            res.data[index].file = process.env.VUE_APP_BASE_imgUrl+item.file
          })
          this.bannerList = res.data
          setTimeout(()=>{
            this.newswiper()
          },10)
          console.log(res , 'banner')
        })
      },
      getList(type){
        var data = {
          page:1,
          limit:5,
          type:type
        }
        agreement(data).then(res=>{
          if(type == 2){
            // 常见问题
            this.questionList = res.data.list
            console.log(res , '常见问题')
          }
          if(type == 3){
            // 公告
            this.NoticeList = res.data.list
            console.log(res , '公告')
          }

        })
      },
      navTo(url){
        console.log(url , '-----')
        this.$router.push({path:url})
      }
    }
}
</script>

<style lang="scss" scoped>
  .module_box_item_list_title{
    font-weight: 700;
    font-size: 1vw;
    display:flex;
    justify-content: space-between;
    user-select: none;
  }
  .more{
    font-size: .8vw;
    font-weight: 400;
    color: #ccc;
  }
  .swiper-container {
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: #ECECEC;
    --swiper-pagination-color: #ECECEC; // 分页器颜色
    /* 设置Swiper风格 */
    --swiper-theme-color: #ff6600;
    /* 设置按钮大小 */
    --swiper-navigation-size: 30px;
    .swiper-slide {
      .swiper-slide-img{
        width: 100%;
        min-height: 65vh;
      }
    }
  }
  .module_box{
    display: flex;

    box-sizing: border-box;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 24vh;
    cursor: pointer;
    padding: 1vw 10vw;
    .module_box_item{
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: 23vw;
      height: 20vh;
      background: #FFFFFF;
      border: 1px silid #ccc;
      border-radius: 8px 8px 8px 8px;
      background: linear-gradient(180deg, #CCCCCC 0%, rgba(204,204,204 , .2) 100%);
      opacity: 1;
      transition: width .2s;
      transition: height .2s;
      -webkit-transition: width .2s;
    }
    .module_box_item:hover{
      width: 24vw;
      height: 21vh;
      background: linear-gradient(180deg,  rgba(204,204,204 , .2) 0%, #CCCCCC 100%);

    }
    .module_box_item_list{
      width: 23vw;
      height: 20vh;
      transition: width .2s;
      transition: height .2s;
    }
    .xian{
      border-bottom: 1px dashed  #333;
      flex: 1;
    }
    .module_box_item_list_Tit{
      max-width: 50%;
    }

    .module_box_item_list_text{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .8vw;
      width: 100%;
      padding: 4px 0;
      transition: font-size .2s;
      user-select: none;
    }
    .module_box_item_list_text:hover{
      font-size: .9vw;
      font-weight: bold;
      color: #666;
    }

  }


</style>
